<template>
  <div id="app">
    <less-test></less-test>
    <van-button type="primary">测试van按钮</van-button>
    <router-view></router-view>
    <div class="test"></div>
  </div>
</template>
<script>
// 组件套用组件 1:导入  2:注册  3:当标签使用
import lessTest from '../src/components/lessTest'
export default {
  components: {
    lessTest
  }
}
</script>
<style lang="less">
// 定义变量  @变量名:值;
// @color: red;
// 定义一些css
.color {
  background-color: @color;
}
// 定义一个函数class

.test {
  //  当前宽度/设计稿宽度的1/10
  // width: 375px;
  .setWidth(150px);
  height: 300px;
  // background-color: @color;
  .color(); // 没传参数 因此也可以不加括号(加也行)
  animation: move 2s;
}
@keyframes move {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
//
<style lang="less">
// .test {
//   //750/10=75=1rem  375px屏幕的一半 (375/75 转成rem单位)当你将屏幕宽度变化时 盒子还是占一半 因为
//   // 屏幕宽度变动 1rem对应的px也变动 总之满足比例关系
//   width: 375/75rem;
//   height: 200px;
//   background-color: skyblue;
//   margin-top: 30px;
//   animation: move 4s;
// }
// @keyframes move {
//   0% {
//     opacity: 0;
//   }
//   100% {
//     opacity: 1;
//   }
// }
//
</style>
